<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>古诗 - 古诗小程序</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="common.css">
    <style>
        html,
        body {
            height: 100%;
        }

        .poem-card {
            transition: all 0.3s ease;
        }

        .poem-card:hover {
            transform: translateY(-4px);
        }

        .poem-icon {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 12px;
            flex-shrink: 0;
        }

        .poem-title {
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 4px;
        }

        .poem-author {
            font-size: 14px;
            color: #666;
            margin-bottom: 12px;
        }

        .poem-content {
            font-size: 16px;
            line-height: 1.8;
            margin-bottom: 16px;
        }

        .poem-illustration {
            width: 100%;
            height: 180px;
            object-fit: cover;
            border-radius: 8px;
            margin-bottom: 12px;
        }

        .change-btn {
            position: absolute;
            top: 16px;
            right: 16px;
            background-color: rgba(0, 0, 0, 0.06);
            color: #333;
            border-radius: 20px;
            padding: 6px 12px;
            font-size: 12px;
            display: flex;
            align-items: center;
        }

        .change-btn i {
            margin-right: 4px;
        }
    </style>
</head>

<body class="bg-gray-100">
    <div class="phone-container">
        <!-- 顶部状态栏 -->
        <div class="status-bar">
            <span>19:02</span>
            <div class="flex items-center">
                <i class="fas fa-signal mr-2"></i>
                <i class="fas fa-wifi mr-2"></i>
                <i class="fas fa-battery-full"></i>
            </div>
        </div>

        <!-- 内容区域 -->
        <div class="content pb-24">
            <h1 class="text-2xl font-bold mb-6 text-gray-800">发现古诗</h1>

            <!-- 今日古诗卡片 -->
            <div class="card poem-card mb-5">
                <div class="flex items-center mb-4">
                    <div class="poem-icon bg-blue-100 text-blue-500">
                        <i class="fas fa-feather-alt"></i>
                    </div>
                    <div>
                        <div class="poem-title">今日古诗</div>
                        <div class="text-xs text-gray-500">每日一首精选古诗</div>
                    </div>
                </div>

                <button class="change-btn" onclick="showPopup('changePopup')">
                    <i class="fas fa-sync-alt"></i> 更换
                </button>

                <h3 class="poem-title">静夜思</h3>
                <p class="poem-author">唐代 · 李白</p>
                <p class="poem-content">
                    床前明月光，疑是地上霜。<br>
                    举头望明月，低头思故乡。
                </p>

                <div class="flex justify-between items-center text-sm text-gray-500">
                    <span>分类：山水</span>
                    <div class="flex items-center">
                        <i class="far fa-heart mr-1"></i>
                        <span>收藏</span>
                    </div>
                </div>
            </div>

            <!-- 古诗注释卡片 -->
            <div class="card poem-card mb-5">
                <div class="flex items-center mb-4">
                    <div class="poem-icon bg-yellow-100 text-yellow-500">
                        <i class="fas fa-book-open"></i>
                    </div>
                    <div>
                        <div class="poem-title">古诗注释</div>
                        <div class="text-xs text-gray-500">详细解读与赏析</div>
                    </div>
                </div>

                <div class="bg-gray-50 rounded-lg p-4 mb-3">
                    <p class="text-sm leading-6 text-gray-700">
                        <span class="font-semibold">床前明月光：</span>诗人床前照射进来的是明亮的月光。<br>
                        <span class="font-semibold">疑是地上霜：</span>初看像是地上的霜。<br>
                        <span class="font-semibold">举头望明月：</span>抬头望着天上的明月。<br>
                        <span class="font-semibold">低头思故乡：</span>低头不由得想起远方的家乡。
                    </p>
                </div>

                <p class="text-sm text-gray-700 leading-6">
                    这首诗通过对月光的描写，表达了诗人思念家乡的深切感情。全诗语言清新自然，意境优美，是中国最著名的思乡诗之一。
                </p>
            </div>

            <!-- 古诗插画卡片 -->
            <div class="card poem-card">
                <div class="flex items-center mb-4">
                    <div class="poem-icon bg-green-100 text-green-500">
                        <i class="fas fa-image"></i>
                    </div>
                    <div>
                        <div class="poem-title">古诗插画</div>
                        <div class="text-xs text-gray-500">意境图画再现</div>
                    </div>
                </div>

                <img src="https://images.pexels.com/photos/2832382/pexels-photo-2832382.jpeg" alt="静夜思插画"
                    class="poem-illustration">

                <p class="text-sm text-gray-600">
                    月光如水，照在床前，犹如地上的霜。诗人举头望着明月，却思念起远方的家乡。这幅图展现了诗中描绘的静谧夜晚，月光如霜的意境。
                </p>
            </div>
        </div>

        <!-- 底部导航栏 -->
        <div class="tab-bar">
            <div class="tab-item active" data-page="poem">
                <i class="fas fa-book"></i>
                <span>古诗</span>
            </div>
            <div class="tab-item" data-page="search">
                <i class="fas fa-search"></i>
                <span>搜索</span>
            </div>
            <div class="tab-item" data-page="profile">
                <i class="fas fa-user"></i>
                <span>我的</span>
            </div>
        </div>

        <!-- 更换古诗弹出层 -->
        <div id="changePopup" class="popup">
            <div class="popup-header">
                <h3 class="font-semibold">更换古诗</h3>
                <button class="popup-close">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="popup-content">
                <div class="form-group">
                    <label class="form-label">关键词 <span class="text-red-500">*</span></label>
                    <input type="text" class="form-input" placeholder="请输入关键词">
                </div>
                <div class="form-group">
                    <label class="form-label">作者</label>
                    <input type="text" class="form-input" placeholder="请输入作者名">
                </div>
                <div class="form-group">
                    <label class="form-label">类型</label>
                    <select class="form-input">
                        <option value="">请选择类型</option>
                        <option value="山水">山水</option>
                        <option value="思乡">思乡</option>
                        <option value="爱情">爱情</option>
                        <option value="边塞">边塞</option>
                        <option value="田园">田园</option>
                    </select>
                </div>
                <button class="btn btn-primary w-full mt-4" onclick="hidePopup('changePopup')">确认</button>
            </div>
        </div>

        <!-- 遮罩层 -->
        <div id="overlay" class="overlay"></div>
    </div>

    <script src="common.js"></script>
</body>

</html>